import React from "react";
import { Button,Layout,Menu,Pagination } from 'element-react';
import 'element-theme-default';
import {connect} from "react-redux";
import {fetchNewsCate,fetchNews,fetchCateChild} from "../actions/actions";
import NavLink from  "../NavLink/NavLink"

import {formatDateTime} from '../date'

class News extends React.Component{
    componentDidMount(){
      this.props.fetchNewsCate(0);
      this.props.fetchNews(1,5);
    }
    onSelect(node){
      this.props.fetchCateChild(node);
    }
    search(){
      this.props.fetchNews(1,5,null,this.refs.inp.value);
    }

    render () {
        var onCurrentChange = (e) => {
          console.log(this.props)
          this.props.fetchNews(e.target.innerText,5,this.props.cateChild);
        }
        var cate = this.props.newsCate;
        var getNews = this.props.news.rows;
        var cates = [];
        var news = [];
        var page = [];
        var limit = this.props.news.limit
        limit=limit?limit:5;
        for(var i=0;i<cate.length;i++){
          if(!cate[i].parentId){
            cates.push(
              <Menu.Item index={cate[i]._id}>{cate[i].title}</Menu.Item>
            )
          }
        }
        if(getNews){
          for(let i=0;i<getNews.length;i++){
            var img = "../img/img1.png";
            if(getNews[i].thumb){
              img = "http://127.0.0.1:3000/"+getNews[i].thumb[0].filename;
            }
            news.push(
              <div className="media">
                <div className="media-left">
                    <a href="#"><img className="newsImg" src={img}/></a>
                </div>
                <div className="media-body">
                    <h3 className="media-heading">{getNews[i].title}</h3>
                    <p className="news_content" dangerouslySetInnerHTML={{__html:getNews[i].content}}></p>
                    <div><e className="comNum">评论人数：{getNews[i].comNum}人</e>
                    <NavLink to={`/comments/${getNews[i]._id}`}><Button ref="zhazha" type="warning" size="mini">查看详情及评论</Button></NavLink>
                    <e className="comNum right">发布时间：{formatDateTime(getNews[i].data)}</e></div>
                </div>
              </div>
            )
          }
        }
        for(let i=1;i<=Math.ceil(this.props.news.total/limit);i++){
          page.push(
            <li><a key={i} href="javascript:void(0)" onClick={(e) => onCurrentChange(e)}>{i}</a></li>
          )
        }
        console.log(this.refs)
        return (
           <div>
              {/*导航栏,新闻选择*/}
              <div className="autoAll clearfix nav_top">
                  <div className="left nav_left">
                      <Menu  defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
                        {cates}
                      </Menu>
                  </div>
                  <div className="left nav_right">
                      <input type="text" placeholder="请输入要查询的内容" ref="inp"/>
                      <Button type="primary" icon="search" onClick={this.search.bind(this)}>搜索</Button>
                  </div>
              </div>

              {/*列表*/}
              <div className="autoAll clearfix newsContent">
                  <div className="bs-example" data-example-id="media-alignment">
                      {news}
                  </div>
              </div>

              {/*分页*/}
              <div className="autoAll clearfix content_bot">
                <div className="right page">
                  {/*<Pagination layout="total,prev, pager,next" total={this.props.news.total} pageSize={limit} currentPage={1} onCurrentChange={this.onCurrentChange.bind(this)}/>*/}
                    <ul className="pagination">
                        <li>
                          <a href="javascript:void(0)" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        {page}
                        <li>
                          <a href="javascript:void(0)" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                    </ul>
              
                </div>
              </div>
          
           </div>
        )
    }
}

const mapStateToProps = (state) => {
  return {
      newsCate:state.reducer.newsCate,
      news:state.reducer.news,
      cateChild:state.reducer.cateChild,
  }
}

const NewNews = connect(
  mapStateToProps,
  {fetchNewsCate,fetchNews,fetchCateChild},

)(News);
module.exports = NewNews;